<template>
  <div class="register">
    <h1>注册</h1>
    <form @submit.prevent="register">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="formData.username" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="formData.password" required>
      </div>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue'
// 从 vue 库中导入 ref 函数，用于创建响应式数据
export default {
  // 组件名称为 Register
  name: 'Register',
  setup() {
    // 使用 ref 创建一个响应式对象 formData，包含 username 和 password 两个属性，初始值为空字符串
    const formData = ref({
      username: '',
      password: ''
    })
    // 注册方法，处理表单提交逻辑
    const register = () => {
      // 从 localStorage 中获取存储的用户列表，如果不存在则返回空数组
      const users = JSON.parse(localStorage.getItem('users') || '[]')
      // 查找是否存在与当前输入用户名相同的用户
      const existingUser = users.find(u => u.username === formData.value.username)
      if (existingUser) {
        alert('用户名已存在！')
      } else {
         // 如果用户名不存在，将新用户信息添加到用户列表中
        users.push({
          username: formData.value.username,
          password: formData.value.password
        })
        localStorage.setItem('users', JSON.stringify(users))
        alert('注册成功！请登录。')
        window.location.href = '/login'// 重定向到登录页面
      }
    }
    // 将 formData 和 register 方法返回，以便在模板中使用
    return {
      formData,
      register
    }
  }
}
</script>

<style scoped>
.register {
  text-align: left;
}
/* 表单组样式，底部边距为 15px */
.form-group {
  margin-bottom: 15px;
}
/* 表单组标签样式，显示为块级元素，底部边距为 5px */
.form-group label {
  display: block;
  margin-bottom: 5px;
}
/* 表单组输入框样式，宽度为 100%，内边距为 10px，边框为 1px 灰色，圆角为 5px */
.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
/* 按钮样式，背景颜色为绿色，文字颜色为白色，无边框，内边距为 10px 15px，圆角为 5px，鼠标指针为手型 */
button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>